


<div style="border: solid 1px red; padding: 20px">
<p><a href="#" onclick="rent()">Rent</a> | <a href="#" onclick="retur()">Return</a> | <a href="#" onclick="report()">Reports</a></p>


<div id="content">
<% @employee_label = Employee.find_by_id(session[:employee_id])%>
  <b>Welcome to the Rental Center, <%= @employee_label.first_name %>!</b>
    <div class="main">
      <p>Get started by using the links above. Once you've made a selection, use the sub links to to navigate through each process</p>
    </div>
</div>

</div>

<span style="background-color: red; color: white;">Find this in the app/views/layouts/rental.rhtml</span>

<div style='display:none'>

<!--/////////////////////
//////////RENT///////////
//////////////////////-->

<!-- Start Pages //-->
  <div id="rent"> <!-- who's the customer? //-->
    <b>Rent</b>
      <div class="main">
        <div id="left">
          <p>
            <a href="#" onclick="newCustomer()">New Customer</a>
          </p>
        </div>
        <div id="or">
          <p>or</p>
        </div>
        <div id="right">
          <p>Existing Customer:<br /><input id="display-name" name="display-name" type="text" value=""></p>
        </div>
      </div>
    <a href="#" class="right " onclick="equip()">NEXT >></a>
  </div>

  <div id="equipment"> <!-- what equipment do they want? //-->
    <b>Rent</b>
      <div class="main">

        <table width="100%">
          <tr>
            <th>Name</th>
            <th>Description</th>
            <th>Available</th>
            <th>Add</th>
          </tr>
          <% for equipment in @equipment.sort_by{ |a| a.id}%>
            <tr>
              <td><%= link_to h(equipment.name), :controller => "equipment", :action => "edit", :id => equipment.id %> <br /></td>
              <td><%= truncate(h(equipment.description),20) %></td>
              <td>
                <% if equipment.customer_id == nil or equipment.customer_id == 0 %>
                  Available
                <% else %>
                  <%= h(equipment.customer.name) %>
                <% end %>
              </td>
              <!--<td><%= link_to_remote "Add to Cart", :update => 'cart', :url => {:action => "add_to_cart", :id => equipment.id } %></td>//-->
              <td><%= link_to "Add to Cart", :action => "add_to_cart", :id => equipment.id %></td>
            </tr>
          <% end %>
        </table>

      </div>
    <a href="#" class="left" onclick="rent()"><< BACK</a><a href="#" class="right " onclick="date()">NEXT >></a>
  </div>

  <div id="date"> <!-- how long do they want the equipment? //-->
    <b>Rent</b>
      <div class="main">
        <div id="left">
          <input type="radio" name="group1" value="" checked><u>Same Date</u>
          <p>Out Date:<br/><input type="text" value="<%= Date.today %>"
            onfocus="this.select();calendar_open(this,{format:'%Y-%m-%d'})"
            onclick="event.cancelBubble=true;this.select();calendar_open(this,{format:'%Y-%m-%d'})" /></p>
          <p>Return Date:<br/><input type="text" value="<%= Date.today %>"
            onfocus="this.select();calendar_open(this,{format:'%Y-%m-%d'})"
            onclick="event.cancelBubble=true;this.select();calendar_open(this,{format:'%Y-%m-%d'})" /></p>
        </div>
        <div id="or">
          <p>or</p>
        </div>
        <div id="right">
          <input type="radio" id="dates_button" name="group1" onclick="selectDates()" value=""><u>Different Dates</u>
          <p><a href="#" onclick="selectDates()" class="dates">Select Dates</a></p>
        </div>
      </div>
    <a href="#" class="left" onclick="equip()"><< BACK</a><a href="#" class="right " onclick="cart()">NEXT >></a>
  </div>

  <div id="cart"> <!-- is everything right? //-->
    <b>Rent</b>
      <div class="main">
        <%= render :partial => "rental/cart" %>
      </div>
    <a href="#" class="left" onclick="date()"><< BACK</a><a href="#" class="right " onclick="">FINISH >></a>
  </div>

<!--> End Pages //-->

<!--> Start Dialogs //-->

  <div id="add_customer_dialog" title="Adding a Customer&nbsp;">
    <%= render(:partial => "customer/add_customer") %>
    <script type="text/javascript">
      $("#username").focus();
    </script>
  </div>

  <div id="date_dialog" title="Select Dates&nbsp;">
    <%= render(:partial => "dates") %>
  </div>


<!--> End Dialogs //-->

<!--/////////////////////
/////////RETURN//////////
//////////////////////-->

  <div id="return">
    <b>Return</b>
      <div class="main">
        <div id="left">
          <p>By Customer <br/><input type="text" value=""></p>
        </div>
        <div id="or">
          <p>or</p>
        </div>
        <div id="right">
          <p><a href="#">By Rental</a></p>
        </div>
      </div>
    <a href="#" class="right " >NEXT >></a>
  </div>

<!--/////////////////////
/////////REPORTS/////////
//////////////////////-->

  <div id="reports">
    <b>Reports</b>
      <div class="main">
        <p>
        Late Returns<br/>
        People with overdue equipment
        </p>
      </div>
  </div>
</div>
</div>

<!--/////////////////////
///////JAVASCRIPT!///////
//////////////////////-->

<script type="text/javascript">

  function newCustomer() {
    $('#add_customer_dialog').dialog({ autoOpen: false});
    $('#add_customer_dialog').dialog('open');
  }

  function selectDates() {
    $('#date_dialog').dialog({ autoOpen: false});
    $('#date_dialog').dialog( "option", "width", 600);
    $('#date_dialog').dialog('open');

    $('#dates_button').attr('checked', 'checked');
  }
</script>

